<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import {post} from '../api/api'
import {setToken} from '../api/auth'
import { ElMessage } from 'element-plus'

const formInline = ref({
  phonenumber: '',
})
const router = useRouter()
const checked = ref(false)
const dialogVisible = ref(false)

const onSubmit = async () => {
  if (!checked.value) {
    return ElMessage.warning('请先勾选协议')
  }
  let params = {
    phone: formInline.value.phonenumber
  }
  const res = await post('/c/user/login', params);
  if (res?.data?.status == 200) {
    router.push('/mine')
    setToken(res.data?.data)
  } else if (res?.data?.status == 404){
    dialogVisible.value = true
  }
}

const toContact = () => {
  router.push('/contactUs')
}
</script>

<template>

  <div class="login">
    <div class="logo-title">
        Hi~欢迎来到<br/>数据综合查询平台
    </div>
    <div class="text-center login-title">登录账号</div>
    <div class="text-center fz13">不动产、司法数据、社保查询</div>
    <el-form :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input  class="br20" v-model="formInline.phonenumber" placeholder="请输入手机号码登录"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="br20">立即登录</el-button>
      </el-form-item>
      <el-form-item>
        <div class="text-center" @click="dialogVisible = true">还没有账号？联系我们> </div>
      </el-form-item>
    </el-form>
    <div class="xieyi"><el-checkbox v-model="checked"></el-checkbox>我已阅读并同意<a href="javascript:;">《用户服务协议》</a><a href="javascript:;">《隐私政策》</a></div>

    <el-dialog
    v-model="dialogVisible"
    title=""
    width="92%" 
  >
    <div class="mt12 failure">登录失败</div>
    <div class="mt12 zhuce">当前手机还没注册，添加客服完成注册</div>
    <div class="mt12 btborder failure">长按识别二维码</div>
    <div class="mt12 zhanghao">添加客经理微信获取登录账号</div>
    <img src="@/assets/code.png" alt="" class="code">
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="toContact">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>
body{
  margin: 0;
  padding: 0;
}
.text-center{
  width: 100%;
  text-align: center;
}
.logo-title {
  color: #fff;
  height: 80px;
  background-color: #346EFE;
  padding-top: 100px;
  padding-left: 40px;
  font-size: 18px;;
}
.el-form{
  margin: 0 16px;
  margin-top: 24px;
}
.mt12{
  margin-top: 10px;
}
.btborder{
  border-top: 1px solid #E6E6E6;
  padding-top: 20px;
}
.el-button{
  width: 100%;
}
.zhanghao{
  color: #BABABA;
  font-size: 14px;
}
:deep(.el-dialog) {
  margin-left: 16px;
  margin-right: 16px;
  text-align: center;
}
:deep(.el-dialog__footer) {
 padding-top: inherit;
 padding-bottom: 10px;
 border-radius: 40px;
 text-align: center
}
:deep(.el-button) {
  border-radius: 50px;
}
.failure{
  color: #222222;
   font-weight: 600;
   font-size: 16px;
}
.zhuce{
  color: #222222;
   font-weight: 400;
   font-size: 14px;

}
.dialog-footer .el-button{
  width: 90%;
  background: #346EFE;
}
.code{
  height: 160px;
  margin-top: 25px;
  margin-bottom: 10px;
}
.login-title{
  margin-top: 16px;
  margin-bottom: 10px;
  color: #000;
}
.br20, .el-input__wrapper{
  border-radius: 20px;
  background-color: #346efe;
  height: 40px;
}
:deep(.el-input__wrapper ){
  border-radius: 20px;
  height: 40px;
  background-color: #f6f6f6;
}
:deep(.el-checkbox__inner) {
  border-radius: 50%;
  margin-right: 3px;
}
.xieyi{
  position: fixed;
  text-align: center;
  bottom: 10px;
  width: 100%;
  font-size: 13px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.xieyi a{
  color: #346EFE;
  text-decoration: none;
}
.fz13{
  font-size: 13px;
  color: #999;
}
:deep(.el-overlay-dialog){
  overflow: hidden;
}
</style>
